<template>
  <div class="repayment">
    <van-nav-bar title="查账还款" @click-left="onClickLeft" />
    <van-tabs v-model="active" @change="changeTabHandle">
      <van-tab title="6月账单" name="1"></van-tab>
      <van-tab title="七月未出账单" name="2"></van-tab>
    </van-tabs>
    <div class="container">
      <div class="card">
        <div class="left">
          <div class="logo"></div>
          <div>中国移动联名卡(9366)</div>
        </div>
        <van-button size="small" class="chageAccount" round type="danger">切换账户</van-button>
      </div>
      <repaymentCard v-model="juneValue" v-if="active === '1'" @quikcRePayment="quikcRePayment"></repaymentCard>
      <repaymentCard v-model="julyValue" v-else>
        <template slot="bottomGroup">
          <div class="groups">
            <van-button size="small" round type="default" @click="quikcRePayment">快速还款</van-button>
            <van-button size="small" round type="danger">未出账单分期</van-button>
          </div>
        </template>
      </repaymentCard>
    </div>
  </div>
</template>

<script>
import repaymentCard from "./components/repaymentCard.vue";
export default {
  name: "repayment",
  components: {
    repaymentCard
  },
  data() {
    return {
      active: "1",
      juneValue: "12988.57",
      julyValue: "248.31"
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    changeTabHandle(index) {
      this.active = index;
    },
    quikcRePayment() {
      this.$router.push("/repayment/quikcRePayment");
    }
  }
};
</script>

<style lang='less' scoped>
.repayment {
  height: 100vh;
  background-color: #f7f7f7;
  .van-tabs {
    /deep/.van-tabs__line {
      background-color: #ee0a24;
    }
  }
  .container {
    width: 100%;
    padding: 0.15rem 0.18rem 0rem 0.18rem;
    box-sizing: border-box;
    .card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.12rem;
      box-sizing: border-box;
      width: 3.34rem;
      height: 0.4rem;
      background-color: #fff;
      border-radius: 0.05rem;
      .left {
        font-size: 0.12rem;
      }
      .chageAccount {
        width: 0.8rem;
      }
    }
    .repayment-card {
      /deep/.groups {
        display: flex;
        margin-top: 0.4rem;
        justify-content: space-between;
        .van-button {
          width: 1.2rem;
        }
      }
    }
  }
}
</style>
